<template>
<div id="hy-swiper">
    <div class="swiper" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
        <slot></slot>
    </div>
    <slot name="indicator">
    </slot>
    <div class="indicator">
        <slot name="indicator" v-if="showIndicator && slideCount>1">
            <div v-for="(item, index) in slideCount" class="indi-item" :class="{active: index === currentIndex-1}" :key="index"></div>
        </slot>
    </div>
</div>
</template>

<script>
export default {
    name: "Swiper",
    props: {
        interval: {
            type: Number,
            default: 3000
        },
        animDuration: {
            type: Number,
            default: 300
        },
        moveRatio: {
            type: Number,
            default: 0.25
        },
        showIndicator: {
            type: Boolean,
            default: true
        }
    },
    data: function () {
        return {
            slideCount: 0, // 元素个数
            totalWidth: 0, // swiper的宽度
            swiperStyle: {}, // swiper样式
            currentIndex: 1, // 当前的index
            scrolling: false, // 是否正在滚动
        }
    },
    mounted: function () {
        // 1.操作DOM, 在前后添加Slide
        setTimeout(() => {
            this.handleDom();

            // 2.开启定时器
            this.startTimer();
        }, 3000)
    },
    methods: {
        /**
         * 定时器操作
         */
        startTimer: function () {
            this.playTimer = window.setInterval(() => {
                this.currentIndex++;
                this.scrollContent(-this.currentIndex * this.totalWidth);
            }, this.interval)
        },
        stopTimer: function () {
            window.clearInterval(this.playTimer);
        },

        /**
         * 滚动到正确的位置
         */
        scrollContent: function (currentPosition) {
            // 0.设置正在滚动
            this.scrolling = true;

            // 1.开始滚动动画
            this.swiperStyle.transition = 'transform ' + this.animDuration + 'ms';
            this.setTransform(currentPosition);

            // 2.判断滚动到的位置
            this.checkPosition();

            // 4.滚动完成
            this.scrolling = false
        },

        /**
         * 校验正确的位置
         */
        checkPosition: function () {
            window.setTimeout(() => {
                // 1.校验正确的位置
                this.swiperStyle.transition = '0ms';
                if (this.currentIndex >= this.slideCount + 1) {
                    this.currentIndex = 1;
                    this.setTransform(-this.currentIndex * this.totalWidth);
                } else if (this.currentIndex <= 0) {
                    this.currentIndex = this.slideCount;
                    this.setTransform(-this.currentIndex * this.totalWidth);
                }

                // 2.结束移动后的回调
                this.$emit('transitionEnd', this.currentIndex - 1);
            }, this.animDuration)
        },

        /**
         * 设置滚动的位置
         */
        setTransform: function (position) {
            this.swiperStyle.transform = `translate3d(${position}px, 0, 0)`;
            this.swiperStyle['-webkit-transform'] = `translate3d(${position}px), 0, 0`;
            this.swiperStyle['-ms-transform'] = `translate3d(${position}px), 0, 0`;
        },

        /**
         * 操作DOM, 在DOM前后添加Slide
         */
        handleDom: function () {
            // 1.获取要操作的元素
            let swiperEl = document.querySelector('.swiper');
            if (swiperEl == null) return;
            let slidesEls = swiperEl.getElementsByClassName('slide');

            // 2.保存个数
            this.slideCount = slidesEls.length;

            // 3.如果大于1个, 那么在前后分别添加一个slide
            if (this.slideCount > 1) {
                let cloneFirst = slidesEls[0].cloneNode(true);
                let cloneLast = slidesEls[this.slideCount - 1].cloneNode(true);
                swiperEl.insertBefore(cloneLast, slidesEls[0]);
                swiperEl.appendChild(cloneFirst);
                this.totalWidth = swiperEl.offsetWidth;
                this.swiperStyle = swiperEl.style;
            }

            // 4.让swiper元素, 显示第一个(目前是显示前面添加的最后一个元素)
            this.setTransform(-this.totalWidth);
        },

        /**
         * 拖动事件的处理
         */
        touchStart: function (e) {
            // 1.如果正在滚动, 不可以拖动
            if (this.scrolling) return;

            // 2.停止定时器
            this.stopTimer();

            // 3.保存开始滚动的位置
            this.startX = e.touches[0].pageX;
        },

        touchMove: function (e) {
            // 1.计算出用户拖动的距离
            this.currentX = e.touches[0].pageX;
            this.distance = this.currentX - this.startX;
            let currentPosition = -this.currentIndex * this.totalWidth;
            let moveDistance = this.distance + currentPosition;

            // 2.设置当前的位置
            this.setTransform(moveDistance);
        },

        touchEnd: function (e) {
            // 1.获取移动的距离
            let currentMove = Math.abs(this.distance);

            // 2.判断最终的距离
            if (this.distance === 0) {
                return
            } else if (this.distance > 0 && currentMove > this.totalWidth * this.moveRatio) { // 右边移动超过0.5
                this.currentIndex--
            } else if (this.distance < 0 && currentMove > this.totalWidth * this.moveRatio) { // 向左移动超过0.5
                this.currentIndex++
            }

            // 3.移动到正确的位置
            this.scrollContent(-this.currentIndex * this.totalWidth);

            // 4.移动完成后重新开启定时器
            this.startTimer();
        },

        /**
         * 控制上一个, 下一个
         */
        previous: function () {
            this.changeItem(-1);
        },

        next: function () {
            this.changeItem(1);
        },

        changeItem: function (num) {
            // 1.移除定时器
            this.stopTimer();

            // 2.修改index和位置
            this.currentIndex += num;
            this.scrollContent(-this.currentIndex * this.totalWidth);

            // 3.添加定时器
            this.startTimer();
        }
    }
}
</script>

<style scoped>
#hy-swiper {
    overflow: hidden;
    position: relative;
}

.swiper {
    display: flex;
}

.indicator {
    display: flex;
    justify-content: center;
    position: absolute;
    width: 100%;
    bottom: 8px;
}

.indi-item {
    box-sizing: border-box;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: #fff;
    line-height: 8px;
    text-align: center;
    font-size: 12px;
    margin: 0 5px;
}

.indi-item.active {
    background-color: rgba(212, 62, 46, 1.0);
}
</style>
